<template>
  <div class="home">
      <div class="title">
        <el-button-group>
          <el-button :type="currentLang === 'zh' ? 'primary' : 'default'" @click="changeLanguage('zh')">中文</el-button>
          <el-button :type="currentLang === 'en' ? 'primary' : 'default'" @click="changeLanguage('en')">English</el-button>
        </el-button-group>
        <br>
      </div>

      <div class="content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本使用</span>
          </div>
          <p><el-button>{{ $t("common.btn.cancel") }}</el-button></p>
          <p>401：{{ $t("common.error.codeMsg.401") }}</p>
          <p>{{ $t("user.field.name") }}</p>
          <p>{{$t("user.field.status")}}: {{ $t("user.statusList")[currentStatus] }}</p>
          <input :placeholder="$t('user.form.placeholder.name')">
          <p><el-button @click="showErrorCodeMsg"> errorCodeMsg (js文件中使用) </el-button></p>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>复数</span>
          </div>
          <p>{{ $tc('common.test.fushu.car', 1) }}</p>
          <p>{{ $tc('common.test.fushu.car', 2) }}</p>
          <br>
          <p>{{ $tc('common.test.fushu.apple', 0) }}</p>
          <p>{{ $tc('common.test.fushu.apple', 1) }}</p>
          <p>{{ $tc('common.test.fushu.apple', 10, { count: 10 }) }}</p>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>i18n中的数字格式化</span>
          </div>
          <h3>货币</h3>
          <p>{{ $n(100, 'currency') }}</p>
          <p>{{ $n(100.33333, 'currency') }}</p>
          <h3>纯数字</h3>
          <p>{{ $n(100, 'decimal') }}</p>
          <p>{{ $n(10323120.322, 'decimal') }}</p>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>i18n中的时间格式化</span>
          </div>
          <p>{{ $d(new Date('2021-09-04 04:03:02'), 'short') }}</p>
          <p>{{ $d(new Date('2021-09-04 04:03:02'), 'long') }}</p>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>组件插值</span>
          </div>
          <!--  i18n 组件的所有子项都必须设置 place 属性。否则它将回退到列表格式-->
          <i18n path="common.test.chazhi.info" tag="p">
            <span place="limit">{{ changeLimit }}</span>
            <a place="action" :href="changeUrl">{{ $t('common.test.chazhi.change') }}</a>
          </i18n>
          <!-- 如果你仍想在命名格式中插入文本内容，可以在 i18n 组件上定义 places 属性。例如：-->
          <i18n path="common.test.chazhi.info" tag="p" :places="{ limit: refundLimit }">
            <a place="action" :href="refundUrl">{{ $t('common.test.chazhi.refund') }}</a>
          </i18n>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>过滤器</span>
          </div>
          <!-- changeLanguage时 过滤器都会被重新调用 , 所以在过滤器中可以使用国际化变量-->
          <p>changeLanguage时 过滤器都会被重新调用 , 所以在过滤器中可以使用国际化变量</p>
          <p>{{'aaa' | test}}</p>
          <br>
          <p> {{$t("user.statusName")}}: {{ currentStatus | userStatus }}</p>
          <p> {{$t("user.statusName")}}: {{ currentStatus | userStatus1 }}</p>

          <h3>时间展示</h3>
          <p>{{new Date() | formatTime('month')}}</p>
          <p>{{new Date() | formatTime('date')}}</p>
          <p>{{new Date() | formatTime('hour')}}</p>
          <p>{{new Date() | formatTime('minute')}}</p>
          <p>{{new Date() | formatTime('second')}}</p>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>状态、类型等列表数据的处理</span>
          </div>
          <h3>状态转换</h3>
          <p>1. 过滤器方式 {{$t("user.statusName")}}: {{ currentStatus | userStatus }}</p>
          <p>2. 国际化方式 {{$t("user.statusName")}}: {{ $t("user.statusList")[currentStatus] }}</p>
          <h3>状态列表获取</h3>
          <select>
            <option v-for="{label, value} in statusList" :key="value" :value="value">{{label}}</option>
          </select>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Other</span>
          </div>
          <h3>状态转换</h3>
          <p><el-button type="danger" @click="confirmDelete"> Delete </el-button></p>
          <p><el-button type="info" @click="confirmUpdateStatus"> status  {{ $t("user.statusList")[currentStatus] }} </el-button></p>
          <br>

          <h3>插值</h3>
          <template v-for="({index, link}, i) in checkContentArray">
            <!-- <p :key="i" v-if="!$t(`common.test.checkContent[${index}].action`)">{{$t(`common.test.checkContent[${index}].info`, {index: i})}}</p> -->
            <p v-if="!link" :key="i">{{$t(`common.test.checkContent[${index}].info`, {index: i + 1})}}</p>
            <i18n v-else :key="i" :path="`common.test.checkContent[${index}].info`" tag="p">
              <span place="index">{{i + 1}}</span>
              <a place="action" :href="link">{{ $t(`common.test.checkContent[${index}].action`) }}</a>
            </i18n>
          </template>
        </el-card>
      </div>
  </div>
</template>

<script>
import { constDataToArray, showErrorCodeMsg, confirmExecHandle } from '@/utils/func'

export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      currentLang: 'zh',
      currentStatus: 1,

      //  组件插值相关
      changeUrl: '/change',
      refundUrl: '/refund',
      changeLimit: 15,
      refundLimit: 30,
    }
  },
  computed: {
    statusList () {
      return constDataToArray(this.$t('user.statusList'))
    },
    checkContentArray () {
      return [
        { index: 1, link: 'http://aa.com' },
        { index: 0 },
      ]
    },
  },
  mounted () {
    console.log('ss', this.$t('common.btn.cancel'))
    console.log('el', this.$t('el'))
  },
  methods: {
    changeLanguage (lang) {
      this.currentLang = lang
      this.$store.commit('setLanguage', lang)
      this.$i18n.locale = lang
    },
    showErrorCodeMsg () {
      console.log('this', this)
      showErrorCodeMsg(401)
    },

    handleDelete () {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
      })
    },
    confirmDelete () {
      const title = this.$t('common.dialogTitle.info')
      const text = this.$t('common.confirmDeleteText', { source: this.$t('user.sourceName') })
      confirmExecHandle(title, text, () => {
        return this.handleDelete().then(res => {
          const msg = this.$t('common.confirmDeleteResult.success')
          this.$message.success(msg)
        }).catch(_ => {
          const msg = this.$t('common.confirmDeleteResult.error')
          this.$message.error(msg)
        })
      })
    },

    handleUpdateStatus (status) {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
      })
    },
    confirmUpdateStatus () {
      const newStatus = this.currentStatus === 1 ? 0 : 1
      const title = this.$t('common.dialogTitle.info')
      const text = this.$t('user.confirmUpdateStatus.text', { action: this.$t('user.statusList')[newStatus] })
      confirmExecHandle(title, text, () => {
        return this.handleUpdateStatus(status).then(res => {
          this.currentStatus = newStatus
          const msg = this.$t('user.confirmUpdateStatus.result.success', { action: this.$t('user.statusList')[newStatus] })
          this.$message.success(msg)
        }).catch(_ => {
          const msg = this.$t('user.confirmUpdateStatus.result.fail', { action: this.$t('user.statusList')[newStatus] })
          this.$message.error(msg)
        })
      })
    },
  },
}
</script>

<style lang="scss">
.home{
  margin: 0 auto;
  width: 800px;
  .title{
    text-align: center;
    padding: 20px;
  }
  .content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .el-card {
    width: 390px;
    margin-bottom: 20px;
  }
}

</style>
